<template>
  <div class="searchPage">
    <div class="searchPage-header">
      <!-- 搜索框 -->
      <form action="/">
        <van-search v-model="value" show-action placeholder="茅台酒" @search="onSearch" @cancel="onCancel" />
      </form>
      <!-- 历史记录 -->
      <div class="header-list">
        <text class="list-text">历史记录</text>
        <van-icon name="delete-o" size="18px" @click="clearHistory" />
        <div class="list-tag">
          <van-tag plain size="medium" color="#999" text-color="#333" v-for="(item,index) in historyList" :key="index">{{item}}</van-tag>
        </div>
      </div>
    </div>
    <div class="searchPage-body">
      <h3>热门搜索</h3>
      <div class="search-tab">
        <van-space :size="20" wrap>
          <van-tag class="active" plain size="medium">行李箱</van-tag>
          <van-tag plain size="medium" color="#999" text-color="#333">蓝牙耳机</van-tag>
          <van-tag plain size="medium" color="#999" text-color="#333">牙膏</van-tag>
          <van-tag plain size="medium" color="#999" text-color="#333">床</van-tag>
          <van-tag plain size="medium" color="#999" text-color="#333">咖啡</van-tag>
          <van-tag plain size="medium" color="#999" text-color="#333">四件套</van-tag>
          <van-tag plain size="medium" color="#999" text-color="#333">口罩</van-tag>
        </van-space>
      </div>
    </div>
  </div>
  <div style="background-color: #eee; height: 400px"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Search',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { showToast, type ToastOptions } from 'vant'
import { useRouter } from 'vue-router';
const value = ref('')
const historyList = ref(['行李箱'])
function onSearch() {
  let item = value.value.trim()
  value.value = ''
  item && historyList.value.push(item)

}
function clearHistory() {
  historyList.value = []
}
const router = useRouter()
function onCancel() {
  router.go(-1)
}
</script>

<style scoped lang="scss">
// 搜索框
.searchPage-header .header-search {
  margin-bottom: 10px;
}
// 历史记录
.header-list {
  height: 80px;
  padding-top: 20px;
  border-bottom: 10px solid #eee;

  .list-text {
    margin-right: 270px;
    font-size: 14px;
    color: #999999;
    padding: 6px 12px;
  }
}

.list-tag {
  height: 82px;
  padding: 10px 0px;

  .van-tag {
    margin: 0px 10px 10px;
  }
}

// 热门搜索
.searchPage-body {
  h3 {
    font-size: 14px;
    font-weight: normal;
    color: #999999;
    padding: 6px 12px;
  }

  .search-tab {
    height: 82px;
    padding: 10px 10px;

    .active {
      color: #dd1a21;
    }
  }
}

.van-tag {
  --van-tag-medium-padding: 6px;
  border-radius: 4px;
}
</style>
